/**
 * FORM 表单演示 - 子组件添加更多功能
 * 给输入框添加按钮，点击弹窗输入框中的内容
 */
import React from "react";
import type { FormProps } from "antd";
import { Button, Form, Input, message, Space } from "antd";

type FieldType = {
  username?: string;
};

const onFinish: FormProps<FieldType>["onFinish"] = (values) => {
  console.log("Success:", values);
};

const onFinishFailed: FormProps<FieldType>["onFinishFailed"] = (errorInfo) => {
  console.log("Failed:", errorInfo);
};

const App: React.FC = () => (
  <Form
    name="basic"
    labelCol={{ span: 8 }}
    wrapperCol={{ span: 16 }}
    style={{ maxWidth: 600 }}
    initialValues={{ remember: true }}
    onFinish={onFinish}
    onFinishFailed={onFinishFailed}
    autoComplete="off"
  >
    <Form.Item<FieldType> label="姓名" name="username">
      <MyInput />
    </Form.Item>

    <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
      <Button type="primary" htmlType="submit">
        打印值
      </Button>
    </Form.Item>
  </Form>
);

//准备特制输入框

const MyInput = (props: any) => {
  const showName = () => {
    if (props.value) {
      message.success("姓名打印成功" + props.value);
      props.onChange("good" + props.value);
    } else {
      message.error("姓名不能为空");
    }
  };

  const clear = () => {
    props.onChange("");
    message.success("已清空");
  };

  return (
    <Space>
      <Input {...props} />
      <Button onClick={showName}>弹出名字</Button>
      <Button onClick={clear}>清空</Button>
    </Space>
  );
};

export default App;
